<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="sp" uri="/web-simple-page"%>
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${ctxPath}/script/jquery/plugins/jquery-easyui-1.3.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctxPath}/script/jquery/plugins/jquery-easyui-1.3.2/themes/icon.css">
<script type="text/javascript" src="${ctxPath}/script/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${ctxPath}/script/jquery/plugins/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctxPath}/script/common/extension/date-extension.js"></script>
<script type="text/javascript" src="${ctxPath}/script/common/data-formater-util.js"></script>
<title>用户主页</title>
<style>
<!--
.overflowHide{
	overflow: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
	function openMenu(node, url) {
		var tabTitle = $(node).text();
		var container = $(node).closest('.sub-system').find('.sub-menu-tab-container');
		//检查当前Tab是否存在；如果存在，则Focus，不存在则创建。
		if($(container).tabs('exists', tabTitle) && false){
			container.tabs('select', tabTitle);
		}else{
            var content = '未实现';
			if (url){  
	            content = '<iframe name="Frm_'+ new Date().getTime() +'" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
	        }
			container.tabs('add', {
				title : tabTitle,
				border: false,
				fit: true,
				bodyCls: 'overflowHide',
				content : content,
// 				href:url,
// 				fit:true,
				closable : true
			});
			$.parser.parse('iframe');
		}
	}
	function closeSubMenuTab(target){
		var eventTabIndex = $('#tabsRightMenu').data("eventTabIndex");
        var eventTabTitle = $('#tabsRightMenu').data("eventTabTitle");
		var tabsContainer = $('#tabsRightMenu').data("tabsContainer");
		var indexMax = $(tabsContainer).tabs('tabs').length;
		if(target === 'current'){
			$(tabsContainer).tabs('close', eventTabTitle);
		}else if(target === 'all'){
			for(var i=indexMax-1; i>=0; i--){
				$(tabsContainer).tabs('close', i);
			}
		}else if(target === 'others'){
			for(var i=indexMax-1; i>=0; i--){
				if(i != eventTabIndex){
					$(tabsContainer).tabs('close', i);
				}
			}
		}else if(target === 'left'){
			for(var i=eventTabIndex-1; i>=0; i--){
				$(tabsContainer).tabs('close', i);
			}
		}else if(target === 'right'){
			for(var i=indexMax-1; i>=0; i--){
				if(i > eventTabIndex){
					$(tabsContainer).tabs('close', i);
				}
			}
		}
	}
	$(function(){
			//Tab的右键菜单
			$('.sub-menu-tab-container').tabs({
				onContextMenu: function(e, title, index){
					e.preventDefault();
					$('#tabsRightMenu').data('eventTabIndex', index);
					$('#tabsRightMenu').data('eventTabTitle', title);
					$('#tabsRightMenu').data('tabsContainer', this);
					$('#tabsRightMenu').menu('show', {
						left: e.pageX,
						top: e.pageY
					});
				}
		    });
			
// 			//监听浏览器尺寸
// 			$(window).resize(function() { 
// 				console.debug("main resize,w = "+ $(window).width());
// 			});
	});
	function bindTabRightClick(e, title, index){alert(33);
			e.preventDefault();
			$('#tabsRightMenu').data('eventTabIndex', index);
			$('#tabsRightMenu').data('eventTabTitle', title);
			$('#tabsRightMenu').data('tabsContainer', this);
			$('#tabsRightMenu').menu('show', {
				left: e.pageX,
				top: e.pageY
			});
	}
	
//-->
</script>
</head>
<body style="width: 100%; overflow: hidden; margin: 0; padding: 0;">
	<div class="easyui-layout" fit='true' style="width: 100%;">
		<div data-options="region:'north'" style="height: 50px"></div>
		<div data-options="region:'center'" style="border-top:0px;">
			<div class="easyui-tabs sub-system-tabs" data-options="fit:true" fit='true'>
				<div title="主页">这是主页的内容。</div>			
				<div title="系统管理" class="sub-system" data-options="selected:true" style="padding-top:0px;">
					<div class="easyui-layout" data-options="fit:true">  
						<div data-options="region:'west',split:true,border:true" title="系统功能" style="width: 200px;">
							<div class="easyui-accordion" data-options="fit:true,border:false">
								<div title="菜单管理" style="padding: 10px;">content1</div>
								<div title="用户管理" data-options="selected:true">
									<a href="javascript:void(0)" onclick="openMenu(this, '${ctxPath}/user/sts.do')">添加用户</a>
									<a href="javascript:void(0)" onclick="openMenu(this, '${ctxPath}/user/layoutTest.do')">修改用户</a>
									<a href="javascript:void(0)" onclick="openMenu(this, 'http://www.sina.com.cn')">管理用户</a>
								</div>
								<div title="角色管理" style="padding: 10px">content3</div>
							</div>
						</div>
						<div data-options="region:'center',border:0">
							<div class="easyui-tabs sub-menu-tab-container" data-options="fit:true,border:false">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<div id="tabsRightMenu" class="easyui-menu" style="width:150px;display:none;" >
	<div onclick="closeSubMenuTab('current')">关闭标签页</div>
	<div onclick="closeSubMenuTab('all')">关闭全部标签页</div>
	<div onclick="closeSubMenuTab('others')">关闭其它标签页</div>
	<div class="menu-sep"></div>
	<div onclick="closeSubMenuTab('left')">关闭左侧标签页</div>
	<div onclick="closeSubMenuTab('right')">关闭右侧标签页</div>
</div>	
</body>
</html>